<template>
 <div>
    <header-bar>答题</header-bar>
    <div class="test-info">
       <span class="t-id">问卷编号：201806300193844341</span>
       <span class="t-time">时间：20:10</span>
    </div>
     <div class="container">
        <div class="list" v-for="(item, index) in testArr" :key="index">
           <div class="test-content"><span>{{index+1}}、{{item.title}}</span><i class="iconfont icon-add1" @click="addStudent(index)"></i></div>
           <div class="student-list"><span v-for="(item, ind) in item.studentArr" :key="ind" v-if="item.isChecked">{{item.name}}</span></div>
        </div>
        <div class="button" @click="submitAnswer()">提交</div>
     </div>
     <!--模态框-->
     <div class="modal" v-if="isShow">
         <div class="bg"></div>
         <div class="content">
           <i class="iconfont icon-close" @click="isClose()"></i>
           <h3>学生名单</h3>
            <div class="students">
              <div class="checkbox" v-for="(ite, i) in studentList" :key="i" @click="isSelected(i)">
                  <i class="iconfont " :class="ite.isChecked?'icon-right':'icon'">
                  </i>
                  <span>{{ite.name}}</span>
              </div>
            </div>
         </div>
     </div>
     <!--提示框-->
     <div class="prompt-dialog-box" v-if="isTool">
       <div class="bg"></div>
       <div class="content">
         <h3>提示</h3> 
          <p>您确定提交</p>
          <div class="button-box">
            <div class="cancel" @click="isClose()">取消</div>
            <div class="confirm" @click="confirm()">确定</div>
          </div>
       </div>
     </div>
 </div>
</template>
<script>
import headerBar from "../components/header-bar";
import base from "../assets/js/base.js";
export default {
  name: "Answer",
  data() {
    return {
      testArr: [
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有，你好吗总额是黑色",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍进食不好",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        },
        {
          title: "在过去几天，我们宿舍睡眠质量不好的有",
          studentArr: [
            { name: "董邦军", isChecked: false },
            { name: "王俊凯", isChecked: false },
            { name: "严承祥", isChecked: false },
            { name: "陈永伟", isChecked: false },
            { name: "无", isChecked: false }
          ]
        }
      ],
      indexArr: [],
      studentList: [],
      isShow: false,
      isTool: false
    };
  },
  created() {
  },
  mounted() {
    base.changeTabbar("#questionnaire");
  },
  methods: {
    /***选择***/
    isSelected(i) {
      if (this.studentList.length - 1 == i) {
        for (let j = 0; j < this.studentList.length; j++) {
          this.studentList[j].isChecked = false;
        }
        this.studentList[i].isChecked = !this.studentList[i].isChecked;
      } else {
        if (this.studentList[this.studentList.length - 1].isChecked) {
          this.studentList[this.studentList.length - 1].isChecked = !this
            .studentList[this.studentList.length - 1].isChecked;
          this.studentList[i].isChecked = !this.studentList[i].isChecked;
        } else {
          this.studentList[i].isChecked = !this.studentList[i].isChecked;
        }
      }
    },
    /***提交***/
    submitAnswer() {
      this.isTool = true;
      base.forbiddenScroll();
    },
    /***打开模态框***/
    addStudent(i) {
      this.isShow = true;
      this.studentList = this.testArr[i].studentArr;
      base.forbiddenScroll();
    },
    /***关闭模态框***/
    isClose() {
      base.openScroll();
      this.isShow = false;
      this.isTool = false;
    }
  },
  components: {
    headerBar
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/base.scss";
.test-info {
  position: fixed;
  top: ptr(44px);
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: ptr(42px);
  line-height: ptr(42px);
  color: #2484fb;
  font-size: ptr(14px);
  padding: 0 ptr(20px) 0;
  box-sizing: border-box;
  background-color: #fff;
}
.container {
  padding-top: ptr(86px);
  margin-bottom: ptr(70px);
  .list {
    margin-top: ptr(5px);
    padding: ptr(5px) ptr(20px);
    font-size: ptr(14px);
    color: #515151;
    background-color: #fff;
    .test-content {
      display: flex;
      justify-content: space-between;
      span {
        width: ptr(400px);
      }
      i {
        color: #0cb0b5;
        font-size: ptr(32px);
      }
    }
    .student-list {
      margin-top: ptr(5px);
      display: flex;
      flex-wrap: wrap;
      span {
        vertical-align: middle;
        padding: 0 ptr(5px);
        margin: ptr(5px);
        border-radius: ptr(5px);
        border: ptr(1px) dotted #e3656f;
      }
    }
  }
  .button {
    text-align: center;
    height: ptr(40px);
    line-height: ptr(40px);
    font-size: ptr(14px);
    width: ptr(155px);
    margin: ptr(10px) auto;
    color: #fff;
    border-radius: ptr(10px);
    background-color: #0cb0b5;
  }
}
.modal {
  .bg {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    background-color: #000;
  }
  .content {
    position: fixed;
    z-index: 3;
    width: ptr(300px);
    height: ptr(300px);
    top: 50%;
    left: 50%;
    border-radius: ptr(5px);
    margin-top: ptr(-150px);
    margin-left: ptr(-150px);
    background-color: #fff;
    .icon-close {
      position: absolute;
      font-size: ptr(20px);
      right: ptr(-10px);
      top: ptr(-15px);
    }
    h3 {
      font-size: ptr(14px);
      padding: ptr(5px) ptr(20px);
      border-bottom: ptr(1px) solid #f0f0f0;
    }
    .students {
      display: flex;
      flex-wrap: wrap;
      padding: 0 ptr(20px);
      box-sizing: border-box;
      margin-top: ptr(10px);
      height: ptr(230px);
      .checkbox {
        display: flex;
        align-items: center;
        font-size: ptr(16px);
        line-height: ptr(16px);
        margin-top: ptr(10px);
        width: 50%;
        .iconfont {
          color: #2484fb;
          height: ptr(16px);
          width: ptr(16px);
        }
        .icon {
          border-radius: 50%;
          box-sizing: border-box;
          border: ptr(1px) solid #999;
        }

        span {
          margin-left: ptr(20px);
        }
      }
      .checkbox:nth-child(even) {
        justify-content: flex-end;
      }
    }
  }
}
.prompt-dialog-box {
  .bg {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    background-color: #000;
  }
  .content {
    position: fixed;
    z-index: 3;
    top: 50%;
    left: 50%;
    text-align: center;
    margin-top: ptr(-81px);
    margin-left: ptr(-125px);
    height: ptr(162px);
    width: ptr(250px);
    border-radius: ptr(8px);
    background-color: #fff;
    h3 {
      color: red;
      font-size: ptr(18px);
      font-weight: 600;
      margin: ptr(10px) auto;
    }
    p {
      padding: 0 ptr(20px);
      font-size: ptr(16px);
      letter-spacing: ptr(1px);
    }
    .button-box {
      position: absolute;
      bottom: 0;
      display: flex;
      width: 100%;
      justify-content: space-around;
      align-items: center;
      height: ptr(40px);
      .cancel {
        height: ptr(32px);
        width: 45%;
        color: #fff;
        line-height: ptr(32px);
        border-radius: ptr(8px);
        background-color: #2484fb;
      }
      .confirm {
        height: ptr(32px);
        width: 45%;
        color: #fff;
        line-height: ptr(32px);
        border-radius: ptr(8px);
        background-color: #e3656f;
      }
    }
  }
}
/***适配iPhone X***/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .container {
    margin-bottom: ptr(104px);
  }
}
</style>
